import {
    ref,
    computed,
    onMounted,
    onUnmounted,
} from 'vue'
export default function filterTodo(todoListRef) {
    let filterValueRef = ref("all");
    let hashArr = ["all", "active", "completed"];
    const getHash = () => {
        let hash = location.hash.replace(/#\/?/, '');
        if (hashArr.includes(hash)) {
            console.log("hash改变", hash);
            filterValueRef.value = hash;
        } else {
            location.hash = 'all'
        }

    }
    onMounted(() => {
        window.addEventListener("hashchange", getHash);
        // filterList();

    });
    onUnmounted(() => {
        window.removeEventListener("hashchange", getHash)
    });
    // 计算属性，
    let filterTodoListRef = computed(() => {
        switch (filterValueRef.value) {
            case "all":
                return todoListRef.value;
            case "active":
                return todoListRef.value.filter(ele => !ele.completed);
            case "completed":
                return todoListRef.value.filter(ele => ele.completed);
        }
    })

    return {
        filterValueRef,
        filterTodoListRef
    }
}